<template>
	<view class="tab-container">
		<view class="tab-wrapper">
			<!-- 三个标签 -->
			<!-- <view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ 'active': currentTab === index }"
				@click="handleTabChange(index)">
				<text class="tab-text">{{ tab.name }}</text>
			</view> -->
			<u-tabs :list="tabs" @click="handleTabChange"></u-tabs>
		</view>

		<tabs1 v-if="currentTab == 0"></tabs1>
		<tabs2 v-if="currentTab == 1"></tabs2>
		<tabs3 v-if="currentTab == 2"></tabs3>
	</view>
</template>

<script>
	import tabs1 from './component/tabs1.vue';
	import tabs2 from './component/tabs2.vue';
	import tabs3 from './component/tabs3.vue';
	export default {
		components: {
			tabs1,
			tabs2,
			tabs3
		},
		data() {
			return {
				tabs: [{
						name: '沟通统计'
					},
					{
						name: '转化分析'
					},
					{
						name: '客户分析'
					}
				],
				currentTab: 0, // 默认选中"转化分析"


			};
		},
		methods: {
			handleTabChange(item) {
				this.currentTab = item.index;
				// 实际项目中可添加标签切换后的逻辑
				// this.$emit('tabChange', index);
			}
		}
	};
</script>

<style scoped>
	page {
		background-color: #f2f2f2;
	}

	.tab-container {
		/* background-color: #fff; */
		/* padding: 0 20rpx; */
	}

	.tab-wrapper {
		background-color: #fff;
		display: flex;
		height: 90rpx;
		margin-bottom: 24rpx;
		padding: 0 24rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.tab-item {
		/* flex: 1; */
		width: 25%;
		display: flex;
		align-items: center;
		/* justify-content: center; */
		position: relative;
		cursor: pointer;
	}

	/* 左侧边框样式 */
	.left-border {
		position: absolute;
		left: 0;
		top: 28rpx;
		bottom: 28rpx;
		width: 4rpx;
		background-color: #919191;
		/* 默认透明 */
		transition: background-color 0.3s ease;
	}

	/* 选中时的左侧蓝色边框 */
	.active-border {
		background-color: #3589e7;
		/* 蓝色边框 */
	}

	.tab-text {
		font-size: 30rpx;
		color: #666;
		transition: color 0.3s ease;
		margin-left: 16rpx;
	}

	/* 选中状态样式 */
	.active .tab-text {
		color: #3589e7;
		/* 蓝色文字 */
		font-weight: 500;
	}

	/* 选中时下划线效果 */
	.active::after {
		content: '';
		position: absolute;
		bottom: -1px;
		/* 与底部边框对齐 */
		left: 10%;
		width: 60%;
		height: 6rpx;
		background-color: #3589e7;
		/* 蓝色下划线 */
		border-radius: 3rpx 3rpx 0 0;
	}
</style>